<template>
  <view class="ui-upload">
    <nut-uploader
      :url="uploadUrl"
      :data="formData"
      :headers="headers"
       v-model:file-list="files" 
       maximum="1"
      :with-credentials="true"
      @success="onSuccess"
    ></nut-uploader>
  </view>
</template>

<script>
import Taro from '@tarojs/taro';
export default {
  props:{ 
     file:{
       type:String
     }, 
     tag:{
      type:String
     },
     type:{
       type:Number,
       value:2,
     }
  }, 
  data() {
    return {
      uploadUrl: "",
      formData: { pathFlag: 1,},
      headers: { },
      files:this.file ? [ { url: this.file,   type: 'image', status: 'success', }] :[] // 类型和状态 需要传入 
    };
  },
  async mounted(){ ;
    this.uploadUrl = this.ajax.api.fileUpload;
    this.headers =  { 'Authorization':  this.token } 
    this.formData = { pathFlag: this.type }
    // this.files = this.file ? [ { url: this.file,   type: 'image', status: 'success',}] :[]
    console.log("查询图片加载",this.files);
  },
  methods:{
    onSuccess({data}){
        var json = JSON.parse(data.data)
        var data1 = json.data
        console.log(data1.url); 
        var obj = {};obj[this.tag] = data1.url
        this.$store.dispatch("asyncTmp", obj );
    }, 
    onFailure({responseText,option,fileItem}){
        console.log(responseText,option,fileItem);
    }, 
    onDelete({files,fileList,index}){
      console.log({files,fileList,index});
    }
  }
};
</script>

<style lang="scss">
.login {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 94px 20px 40px;
  height: 100vh;
  background: linear-gradient(225deg, #dff0ff 0%, #f3ffff 100%);
  .item-head {
    font-size: 20px;
    font-weight: bold;
    view + view {
      margin-top: 7px;
    }
    .item-footer {
      // background: url('../../images/bg-3.png') no-repeat;
      .nut-checkbox__label {
        font-size: 12px;
        margin-left: 10px;
        display: flex;
      }
    }
    .item-bg {
      width: 100%;
      position: absolute;
      bottom: 0;
      width: 100%;
      left: 0;
    }
    .item {
      background: #fff;
      height: $input-height;
      border-radius: ($input-height / 2);
      margin-bottom: 24px;
      padding: 10px 16px;
      box-sizing: border-box;
    }
    .nut-input {
      background: transparent;
      padding: 0;
      input {
        padding: 0;
      }
    }
    .input-password-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .password-icon {
        color: $disable-color;
      }
    }
  }
  .nut-input {
    height: $input-height;
    border-radius: ($input-height / 2);
    margin-bottom: 24px;
    padding: 10px 16px;
  }
}
</style>
